<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	</head>
	<style>
		.login{
			font-size: 16px !important;
			display: none;
		}
		.login .login-top li{
			width: 50% !important;
			font-size: 18px !important;
		}
		.login .layui-tab-title li{
			padding: 0px;
		}
		.login .layui-tab-content .login-con{
			margin-top: 40px;
		}
		.login .layui-tab-content .login-con input{
			width: 100%;
			height: 50px;
			padding: 20px;
			margin-bottom: 40px;
			border-radius: 5px;
		}
		.login .layui-tab-content .login-con button{
			width: 100%;
			height: 40px;
			border-radius: 5px;
			font-size: 16px;
		}
	</style>
	<body>
		<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
			<button data-method="notice" class="layui-btn">登录</button>
		</div>

		<div id="login" class="login">
			<div class="layui-tab layui-tab-brief" style="margin: 0px 40px;" lay-filter="docDemoTabBrief">
			  <ul class="layui-tab-title login-top">
			    <li class="layui-this">登录</li>
			    <li>注册</li>
			  </ul>
			  <div class="layui-tab-content">
			    <div class="layui-tab-item layui-show">
					<div class="login-con">
					    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
						<input type="password" name="title" lay-verify="title" id="pwd" autocomplete="off" placeholder="请输入密码" class="layui-input">
						<button class="layui-btn layui-btn-fluid">登录</button>
					</div>
			    </div>
			    <div class="layui-tab-item">
			    	<div class="login-con">
					    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
						<div style="width: 60%; float: left;">
							<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
						</div>
						<div style="float: right; width: 35%;">
							<button class="layui-btn  layui-btn-primary layui-btn-fluid">获取验证码</button>
						</div>
						<button class="layui-btn layui-btn-fluid">注册</button>
					</div>
			    </div>
			  </div>
			</div>
		</div>

		<script src="../layui/layui.all.js" charset="utf-8"></script>
		<!--<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>-->
		<script>
			layui.use('layer', function() { //独立版的layer无需执行这一句
				var $ = layui.jquery,
					layer = layui.layer; //独立版的layer无需执行这一句

				//触发事件
				var active = {
					notice: function() {
						layer.open({
							type: 1,
							title: ' ', //不显示标题栏
							area: ['500px', '430px'],
							resize:false,
							shade: 0.8,
							id: 'LAY_layuipro', //设定一个id，防止重复弹出
							btnAlign: 'c',
							moveType: 0, //拖拽模式，0或者1
								
							content: $('#login'),
							success: function(layero) {
								var btn = layero.find('.layui-layer-btn');
								btn.find('.layui-layer-btn0').attr({
									href: '#',
									target: '_blank'
								});
							}
						});
					}
				};

				$('#layerDemo .layui-btn').on('click', function() {
				
					var othis = $(this),
						method = othis.data('method');
					active[method] ? active[method].call(this, othis) : '';
				});

			});
		</script>
	</body>
</html>